{% embed "system/embed/card/card-with-info-panel.html.twig" %}
    {% import "system/macro/card/card-heading.html.twig" as card_heading %}
    {% block mainHeader %}
        {{ card_heading.component({
            title: localized.headline.geoIp,
        }) }}
    {% endblock %}
    {% block mainContent %}
        {% import "system/macro/row/switch-button.html.twig" as row_switch_button %}
        {% import "system/macro/row/select.html.twig" as row_select %}
        {% import "system/macro/row/save.html.twig" as row_save %}
        {% import "system/macro/form-component/status-indicator.html.twig" as status_indicator %}
        {% import "system/macro/form-component/button.html.twig" as button %}

        {{ row_switch_button.component({
            hint: localized.hint.geoIpActive,
            id: 'geoIpActive',
            label: localized.field.geoIpActive,
            value: data.geoIpActive,
        }) }}

        {% if isLicenseExpired() %}
            <div class="bc-flex bc-items-center bc-px-5 bc-py-2.5">
                {{ getLicenseAlertMessage('licenseExpiredFeatureNotAvailable') | raw }}
            </div>
        {% endif %}

        {% embed "system/embed/form-row.html.twig" %}
            {% block label %}
                <label for="downloadGeoIpDatabase">{{ localized.field.geoIpDatabaseStatus | raw }}</label>
            {% endblock %}
            {% block input %}
                {% import "system/macro/form-component/button.html.twig" as button %}
                {% import "system/macro/form-component/status-indicator.html.twig" as status_indicator %}
                <div>
                    {{ status_indicator.component({
                        status: data.geoIpDatabaseImported,
                        okText: localized.text.geoIpDatabaseDownloaded,
                        errorText: localized.text.geoIpDatabaseNotDownloaded
                    }, localized) }}
                </div>
                <div class="bc-mt-2">
                    {{ button.component({
                        button: data.geoIpDatabaseImported ?
                        '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="bc-w-4 bc-h-4 bc-relative bc--top-0.5 bc-mr-2 bc-inline-block">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                                    </svg>' ~ localized.button.updateDatabase
                        :
                        '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="bc-w-4 bc-h-4 bc-relative bc--top-0.5 bc-mr-2 bc-inline-block"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
                                    </svg>' ~ localized.button.downloadDatabase,
                        name: 'action',
                        value: 'downloadGeoIpDatabase',
                        id: 'downloadGeoIpDatabase',
                        isDisabled: data.geoIpActive == false,
                    }, localized) }}
                </div>
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% block label %}
                <label for="geoIpActive">{{ localized.text.geoIpLastSyncAt }}</label>
            {% endblock %}
            {% block input %}
                {{ data.geoIpLastSuccessfulCheckWithApiFormattedTime }}
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% block label %}
                <label
                    for="geoIpCountriesWithHiddenDialog">{{ localized.field.geoIpCountriesWithHiddenDialog | raw }}</label>
            {% endblock %}
            {% block input %}
                <select multiple="multiple"
                        id="geoIpCountriesWithHiddenDialog"
                        name="geoIpCountriesWithHiddenDialog[]"
                        data-brlbs-localization-showlist-header="{{ localized.text.geoIpHideList | raw }}"
                        data-brlbs-localization-hidelist-header="{{ localized.text.geoIpShowList | raw }}">
                    {% for unionData in options.countriesGroupedByUnion.list %}
                        <optgroup label="{{ localized.countries.unions[unionData.key] }}">
                            {% for country in unionData.value.list %}
                                <option value="{{ country.key }}" {% if country.key in data.geoIpCountriesWithHiddenDialog %}selected{% endif %}>
                                    {{ country.value }}
                                </option>
                            {% endfor %}
                        </optgroup>
                    {% endfor %}
                </select>
            {% endblock %}
        {% endembed %}
        {{ row_switch_button.component({
            hint: localized.hint.geoIpCachingMode,
            id: 'geoIpCachingMode',
            label: localized.field.geoIpCachingMode,
            value: data.geoIpCachingMode,
        }) }}

        {{ row_save.component({
            action: 'save',
        }, localized) }}
    {% endblock %}

    {% block infoPanelHeader %}
        {{ localized.global.headline.thingsToKnow | raw }}
    {% endblock %}

    {% block infoPanelContent %}
        {% embed "system/embed/accordion/accordion-group.html.twig" %}
            {% block content %}
                {% embed "system/embed/accordion/accordion.html.twig" with {id: 'accordionGeoIp', expanded: true} %}
                    {% block title %}
                        {{ localized.thingsToKnow.headlineGeoIp | raw }}
                    {% endblock %}
                    {% block content %}
                        <p>{{ localized.thingsToKnow.geoIpGeneralDescription | raw }}</p>
                    {% endblock %}
                {% endembed %}

                {% embed "system/embed/accordion/accordion.html.twig" with {id: 'accordionGeoIpCaching'} %}
                    {% block title %}
                        {{ localized.thingsToKnow.headlineGeoIpCaching | raw }}
                    {% endblock %}
                    {% block content %}
                        <p>{{ localized.thingsToKnow.geoIpCachingDescription | raw }}</p>
                    {% endblock %}
                {% endembed %}
            {% endblock %}
        {% endembed %}
    {% endblock %}
{% endembed %}
